<template>
	<view>
		<van-nav-bar
		  title="我的"
		  :left-arrow="false"
		  @click-right="onClickRight"
		>
		
		</van-nav-bar>
		
		<view class="main">
			<view class="tx" >
				<view class="img" @click="login">
					<img src="../../static/tx.png" alt="">
					<text>{{ username  }}</text>
				</view>
			</view>
			
			<!-- 订单 -->
			<view class="order">
				<view class="top" @click="toOrder">
					<text>我的订单</text>
					<image src="../../static/font/xby.png" mode=""></image>
				</view>
				<view class="box">
					<view class="item">
						<image src="../../static/font/dfk.png" mode=""></image>
						<text>代付款</text>
					</view>
					<view class="item">
						<image src="../../static/font/dfh.png" mode=""></image>
						<text>待发货</text>
					</view>
					<view class="item">
						<image src="../../static/font/dsh.png" mode=""></image>
						<text>待收货</text>
					</view>
					<view class="item">
						<image src="../../static/font/doj.png" mode=""></image>
						<text>待评价</text>
					</view>
					<view class="item">
						<image src="../../static/font/tk.png" mode=""></image>
						<text>售后/退款</text>
					</view>
				</view>
			</view>
			
			<!-- 其他 -->
			<view class="qt">
				<view class="item" @click="toMyAddre">
					<view class="info">
						<view class="img">
							<image src="../../static/font/adder.png" mode=""></image>
						</view>
						<text>地址管理</text>
					</view>
					<view class="gd">
						<image src="../../static/font/xby.png" mode=""></image>
					</view>
				</view>
				<view class="item">
					<view class="info">
						<view class="img">
							<image src="../../static/font/ts.png" mode=""></image>
						</view>
						<text>投诉中心</text>
					</view>
					<view class="gd">
						<image src="../../static/font/xby.png" mode=""></image>
					</view>
				</view>
				<view class="item">
					<view class="info">
						<view class="img">
							<image src="../../static/font/bz.png" mode=""></image>
						</view>
						<text>帮助中心</text>
					</view>
					<view class="gd">
						<image src="../../static/font/xby.png" mode=""></image>
					</view>
				</view>
				<view class="item">
					<view class="info" @click="outLogin">
						<view class="img">
							<image src="../../static/font/tuo.png" mode=""></image>
						</view>
						<text>退出</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import store from '../../store/index.js'
	export default {
		data() {
			return {
				user:''
				// userinfo:''
			}
		},
		methods: {
			onClickRight(){
				
			},
			toMyAddre(){
				uni.navigateTo({
					url:'/pages/myaddress/myaddress'
				})
			},
			toOrder(){
				uni.navigateTo({
					url:'/pages/orderHistory/orderHistory'
				})
			},
			// 点击跳转到登录页面
			login(){
				uni.getStorage({
					key:'isLogin',
					success(res) {
						console.log(res);
						if(res.data == false){
							uni.navigateTo({
								url:'/pages/login/login'
							})
						}else{
							console.log('用户已经登录');
						}
					},
					fail(err) {
						uni.navigateTo({
							url:'/pages/login/login',
							animationType:'slide-in-right',
							
						})	
					}
				})
			},
			
			// 退出登录
			outLogin(){
				this.$dialog.confirm({
				 title:'退出',
				  message: '确认要退出登录吗?',
				})
				  .then(() => {
				    // console.log(123);
					uni.setStorage({
						key:'isLogin',
						data:false
					})
					this.user = ''
				  })
				  .catch(() => {
				    // on cancel
				  });
				
			}
		},
		// 这个是计算属性节点
		computed:{
			username(){
				let name = !this.user.username ? '未登录':this.user.username
				return name
			}
		},
		onLoad(){
			this.user = store.state.user
			console.log(this.user);
		},
		onShow(){
			if(!this.user){
				this.user = store.state.user
			}
		}
	}
</script>

<style lang="less">
	.main{
		width: 100%;
		height: 89vh;
		background-color: #f3f3f3;
		padding: 20px;
		.tx{
			width: 90%;
			height: 200px;
			background: white;
			border-radius: 10px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.img{
			height: 70%;
			width: 100px;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			img{
				width: 80px;
				height: 80px;
				border-radius: 50%;
			}
		}
		.order{
			width: 90%;
			height: 120px;
			margin-top: 20px;
			margin-bottom: 10px;
			border-radius: 10px;
			background: white;
			padding: 8px 13px;
			box-sizing: border-box;
			.top{
				display: flex;
				width: 100%;
				margin-bottom: 20px;
				justify-content: space-between;
				image{
					width: 15px;
					height: 15px;
				}
			}
			.box{
				display: flex;
				justify-content: space-between;
			}
			.item{
				width: 60px;
				height: 70px;
				display: flex;
				flex-direction: column;
				align-items: center;
				cursor: pointer;
				image{
					width: 35px;
					height: 35px;
					margin-bottom: 5px;
				}
				text{
					font-size: 12px;
				}
			}
		}
		.qt{
			width: 90%;
			height: 220px;
			background: white;
			border-radius: 10px;
			box-sizing: border-box;
			padding: 15px 8px 10px 15px;
			.item{
				display: flex;
				justify-content: space-between;
				cursor: pointer;
				.info{
					width: 40%;
					height: 45px;
					display: flex;
					align-items: center;
				}
				.gd image{
					width: 20px;
					height: 20px;
				}
			}
			.img{
				margin-right: 20px;
				width: 30px;
				height: 30px;
				background-color: #085710;
				border-radius: 50%;
				image{
					width: 20px;
					height: 20px;
				}
			}
		}
	}

</style>
